<template>
	<view class="evaluate">
		<view class="upImgs dFlex jStart_aStart">
			<view class="imgs dFlex jStart_aCenter fWap">
				<view class="upImg imgPublic" @click='chooseImg'>
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/upTool2.png" mode="widthFix"></image>
				</view>
				<view class="imgList dFlex jStart_aCenter fWap">
					<view class="imgOne" v-for="(item,index) in images" :key='index'>
						<image :src="item" mode="widthFix"></image>
						<view class="delIcon imgPublic" @tap='delImg(index)'>
							<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="df">
			<view class="title">服务打分</view>
			<view class="content">
				<view class="tags dFlex jAround_aCenter">
					<view :class="['specs_one',zh_score == '1' ? 'active' : '']" @tap='zh_score = "1"'>非常满意</view>
					<view :class="['specs_one',zh_score == '2' ? 'active' : '']" @tap='zh_score = "2"'>满意</view>
					<view :class="['specs_one',zh_score == '3' ? 'active' : '']" @tap='zh_score = "3"'>一般</view>
					<view :class="['specs_one',zh_score == '4' ? 'active' : '']" @tap='zh_score = "4"'>差评</view>
				</view>
				<view class="desc">
					<textarea auto-height v-model="content" placeholder="请输入评价内容"/>
				</view>
				<view class="payBtn" @tap='subComment'>发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commentGoods
	} from '@/tools/http.js';
	import tools from '@/tools/tools.js'
	export default {
		data() {
			return {
				ogid:'',
				content:'',
				zh_score:'1',
				images:[],
			};
		},
		onLoad(e){
			this.ogid = e.ogid;
		},
		methods:{
			// 提交评价
			async subComment(){
				if(!this.content){
					uni.showToast({
						title:'请简单描述您对商品的看法',
						icon:"none"
					})
					return;
				}
				let res = await commentGoods({
					ogid:this.ogid,
					content:this.content,
					zh_score:this.zh_score,
					images:this.images.length ? this.images.join(','):'',
				});
				if(res){
					uni.showToast({
						title:"评价已提交",
						icon:"success",
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1650)
				}
			},
			// 选择图片
			chooseImg(){
				let len = 9-this.images.length;
				if(len > 0){
					uni.chooseMedia({
						count:len,
						mediaType:['image'],
						sourceType:['album', 'camera'],
						success:(file)=>{
							if(file.tempFiles.length){
								file.tempFiles.map((item,index)=>{
									tools.upImg(item.tempFilePath).then(res=>{
										console.log(res);
										if(res.fullurl){
											this.images.push(res.fullurl);
										}
									}).catch(err=>{
										console.log(err);
									})
								})
							}
						},
						fail:(err)=>{
							console.log(err);
							uni.showToast({
								title:'图片选择失败',
								icon:"none"
							})
						}
					})
				}
			},
			// 删除图片
			delImg(idx){
				this.images.splice(idx,1);
			}
		}
	}
</script>

<style lang="scss">
	.evaluate{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.df{
			width:100%;
			background:white;
			border-radius: 5px;
			padding: 12px;
			box-sizing: border-box;
			.title{
				font-weight: bold;
			}
			.content{
				width:100%;
				.desc{
					width:100%;
					border:1px solid #E6E6E6;
					border-radius: 5px;
					margin: 12px 0;
					padding: 5px;
					box-sizing: border-box;
					textarea{
						width:100%;
						min-height: 80px;
						font-size:13px;
					}
				}
				.payBtn{
					width:max-content;
					color:white;
					border-radius: 50px;
					padding: 5px 20px;
					background:#1362C9;
					font-size:12px;
					margin: 12px auto;
				}
				.tags{
					width:100%;
					margin:8px auto;
					.specs_one{
						display: inline-block;
						width:max-content;
						background:#E6E6E6;
						color: #808080;
						font-size:10px;
						border-radius: 50px;
						padding:3px 8px;
						margin-right:8px;
						border: 1px solid #E6E6E6;
					}
					.active{
						color:#1362C9;
						background: #DCE8F7;
						border-color: #1362C9;
					}
				}
			}
		}
		.upImgs{
			width:100%;
			background:white;
			border-radius: 5px;
			margin-bottom:10px;
			padding: 12px;
			box-sizing: border-box;
			.imgs{
				width: 100%;
				.imgList{
					.imgOne{
						width: 110rpx;
						height: 110rpx;
						margin-left: 20rpx;
						margin-bottom: 20rpx;
						position: relative;
						.delIcon{
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							top:-15rpx;
							right: -15rpx;
						}
					}
					.imgOne:nth-child(3n+3){
						margin-right: 0;
					}
				}
				.upImg{
					margin-bottom: 20rpx;
					width: 110rpx;
					height: 110rpx;
				}
			}
		}
	}
</style>
